<template>
    <div class="header">
        <!-- <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon> -->
        <!-- <i class="el-icon-back"></i> -->
        <div>
            <span>admin 超级管理员</span>
            <span class="logout" @click="outLogin">退出 &nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
    </div>
</template>

<script>
export default {
  computed: {
    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    }
  },
  methods: {
    outLogin() {
        console.log("退出登陆")
      this.$router.push('/login')
    }
  }
};
</script>

<style scoped>
.logout {
  cursor: pointer;
}
.header {
  padding: 0;
  background-color: #ccc;
  line-height: 60px;
  text-align: right;
  padding-right: 25px;
  font-size: 16px;
}
.header span:first-child{
    color: red;
    margin-right: 10px
}
</style>